//----------实现 rem 适配------------
(function () {
  let setFont = function () {
    let html = document.documentElement   //浏览器元素
    let width = html.clientWidth          //内容宽加左右内边距
    if (width < 1024) width = 1024
    if (width > 1920) width = 1920
    let fontSize = width / 80 + 'px'
    html.style.fontSize = fontSize
  }
  //html 刷新页面马上计算fontsize 值
  setFont()
  //当前浏览器改变大小时，重新计算fontSize值
  window.onresize = function () {
    setFont()
  }
})()


  // ----------------------------- 一 、表格渲染-----------------------
// 创建对象、空数组
let data = []
// data=[a, b, c]
let uname = []
let sco = []
let sal = []


function fn() {

  let username = $('input').eq(0).val()
  let score = $('input').eq(1).val()
  let salary = $('input').eq(2).val()
  data.push({ username, score, salary })
  uname = []
  sco = []
  sal = []
  for (let j = 0; j < data.length; j++) {
    uname.push(data[j].username)
    sco.push(data[j].score)
    sal.push(data[j].salary)
  }
}
  
$('button').on('click', function () {
 
 fn()

  let tr
  // 遍历数组data
  for (let i = 0; i < data.length; i++){
    tr =  `<tr>
    <td>${data[i].username}</td>
    <td>${data[i].score}</td>
    <td>${data[i].salary}</td>
    </tr>`
  }
    $('tbody').append(tr)
  $('input').val('')  //清空
  
  

   //------- 二、 插入图表  折线图、柱状图---------------------- 
    
  
    ;(function () {
      myChart1 = echarts.init($('.chart1')[0])
      let   option = {
        grid: [{
          top: '30%',
          left: '15%',
          right: '15%',
          bottom: '15%',
          containLabel: true,
      }],
        "color": ["#00FCFF","#FFDF1C","#5AB72C","#FF715A","#2F9BFF"],
        "xAxis": {
            "nameTextStyle": {
                "color": "rgb(46, 128, 160)",
                "padding": [0, 0, -10, 0],
                "fontSize": 14
            },
            "axisLabel": {
                "color": "rgb(46, 128, 160)",
                "fontSize": 14,
                "interval": 0
            },
            "axisTick": {
                 "alignWithLabel":true,
                "lineStyle": {
                    "color": "rgb(46, 128, 160)",
                    "width": 1
                },
                "show": true
            },
           
            "axisLine": {
               
                "lineStyle": {
                    "color": "rgb(46, 128, 160)",
                    "width": 1,
                    
                },
                "show": true
            },
            "data": uname,
            "type": "category"
        },
        "yAxis": {
            "type": 'value',
            "name": "评分",
          
            "nameTextStyle": {
                "color": "rgb(46, 128, 160)",
                "padding": [0, 0, 20, 0],
                "fontSize": 22,
                "fontWeight":700
            },
            "axisLabel": {
                "color": "rgb(46, 128, 160)",
                "fontSize": 14
            },
            "axisTick": {
                "lineStyle": {
                    "color": "rgb(46, 128, 160)",
                    
                },
                "show": true
            },
            
            "axisLine": {
                "lineStyle": {
                    "color": "rgb(46, 128, 160)",
                    "width": 1,
                    "type": "line"
                },
                "show": true
          },
            
            
        splitLine: {
          show:false
        }
        },
        "series": [{
            "data": sco,
            "type": "line",
            "barMaxWidth": "auto",
          "barWidth": 30,
          "areaStyle": {
            "color": {
              "x": 0,
              "y": 0,
              "x2": 0,
              "y2": 1,
              "type": "linear",
              "global": false,
              "colorStops": [{
                  "offset": 0,
                  "color": "#d7e1e0",
              }, {
                  "offset": 1,
                  "color": "#3e89c8"
              }]
          }
            },
            "itemStyle": {
                "color": {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "#d7e1e0",
                    }, {
                        "offset": 1,
                        "color": "#3e89c8"
                    }]
                }
            },
            "label": {
                "show": true,
                "position": "top",
                "distance": 10,
                "color": "#fff",
                "position": [30, 10],
            }
        }, ],
        "tooltip": {
            "trigger": "axis",
            "show": false
        }
    }
      myChart1.setOption(option)
    })()
   
      
 // --------------chart2------------------
    
    
    
    ;(function () {
      myChart2 = echarts.init($('.chart2')[0])
let option = {
  color: ['#3398DB'],
  tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
  },
  grid: [{
    top: '30%',
    left: '15%',
    right: '15%',
    bottom: '15%',
    containLabel: true,
}],
  xAxis: [
    {
      color: "rgb(46, 128, 160)",
          type: 'category',
          data: uname,
          axisTick: {
              alignWithLabel: true
      },
      axisLine: {
        "lineStyle": {
            "color": "rgb(46, 128, 160)",
            "width": 1,
            "type": "line"
        },
        "show": true
    },
          
      }
  ],
  yAxis: [
    {
      type: 'value',
        
      name: "薪资",
      
      nameTextStyle: {
        color: "rgb(46, 128, 160)",
        padding: [0, 0, 20, 0],
        fontSize: 22,
        fontWeight: 700,
      },
      axisLine: {
        "lineStyle": {
            "color": "rgb(46, 128, 160)",
            "width": 1,
            "type": "line"
        },
        "show": true
    },
    }
  ],
  series: [
      {
          name: '直接访问',
          type: 'bar',
          barWidth: '20',
      data: sal,
      itemStyle: {
        "color": {
            "x": 0,
            "y": 0,
            "x2": 0,
            "y2": 1,
            "type": "linear",
            "global": false,
            "colorStops": [{
                "offset": 0,
                "color": "#d7e1e0",
            }, {
                "offset": 1,
                "color": "#3e89c8"
            }]
        }
    },
      }
  ]
};
      myChart2.setOption(option)
    })()
})





